<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="/css/modules/header.css">
  <link rel="stylesheet" href="/css/index.css">
  <link rel="stylesheet" href="/css/modules/footer.css">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2011960_drlq7vdo6.css">
  <script src="/libs/jquery-3.5.1.js"></script>
</head>

<body>
  <!-- 头部 -->
  <header>

  </header>
  <!-- 内容 -->
  <div class="content">
    <!-- 轮播图 -->
    <div class="banner-swiper">
      <div class="swiper-container banner">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./img/index/b1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/b3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/b2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/b3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/b7.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/b4.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/b5.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/b7.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev btn-pre"></div>
        <div class="swiper-button-next btn-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- tab栏切换 -->
    <div class="tab">
      <h3 align="center">明星产品</h3>
      <div class="tab-top">
        <div class="tab-top-warp" data-tab="阿玛尼粉底">粉装衣橱</div>
        <div class="tab-top-warp" data-tab="阿玛尼口红">唇妆衣橱</div>
        <div class="tab-top-warp" data-tab="阿玛尼香水">香氛衣橱</div>
        <div class="tab-top-warp" data-tab="阿玛尼礼盒">限量礼盒</div>
      </div>
      <div class="tab-foot">
        
        
      </div>
      <script type="text/html" id="tab-foot-template">
        {{each list tab}}
        <div class="box">
          <a href="/html/shop.html?id={{tab.id}}">
          <img src="{{tab.image}}" alt="">
        </a>
          <p>{{tab.title.slice(7,20)}}</p>
          <span>DESIGNER LIFT FOUNDATION</span>
          <ul>
            <li><img src="./img/index/ys1.jpg" alt=""></li>
            <li><img src="./img/index/ys2.jpg" alt=""></li>
            <li><img src="./img/index/ys3.jpg" alt=""></li>
            <li><img src="./img/index/ys4.jpg" alt=""></li>
            <li><img src="./img/index/ys5.jpg" alt=""></li>
            <li><img src="./img/index/ys6.jpg" alt=""></li>
          </ul>
          <div class="star">
            <li><i class="iconfont icon-star"></i></li>
            <li><i class="iconfont icon-star"></i></li>
            <li><i class="iconfont icon-star"></i></li>
            <li><i class="iconfont icon-star"></i></li>
            <li><i class="iconfont icon-star"></i></li>
          </div>
          <div class="buy">
            <span>￥{{tab.price}}</span>
            <a href="/html/shop.html?id={{tab.id}}"><div>立即购买</div></a>
          </div>
        
        </div>
        {{/each}}
      </script>
    </div>
    <div class="classical">
      <img src="./img/index/Mosaic_video.jpg"></img>
      <img src="./img/index/Mosaic_01.jpg" alt="">
      <img src="./img/index/Mosaic_03.jpg" alt="">
      <img src="./img/index/Mosaic_04.jpg" alt="">
    </div>
    <div class="content-roll">
      <div class="swiper-container content">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./img/index/ft1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/ft2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/index/ft3.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev btn-pre"></div>
        <div class="swiper-button-next btn-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
      <div class="swiper-pagination1"></div>
    </div>
  </div>
  <footer>

  </footer>


  <script src="/libs/require.js" data-main="/js/index.js"></script>
</body>

</html>